﻿@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="FormLayout#CaptionPosition" />Caption Position</h2>
    <p>
        The Form Layout’s <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout.CaptionPosition">CaptionPosition</a> property defines where to display caption labels. In this demo, the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout.CaptionPosition">CaptionPosition</a> property is set to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.CaptionPosition">CaptionPosition.Vertical</a> to stack captions above associated editors.
    </p>
</div>

<div class="card demo-card-wide demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                @nameof(Location)=<b>@Location</b>, @nameof(CheckIn)=<b>@CheckIn</b>, @nameof(CheckOut)=<b>@CheckOut</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body card-body-fl">
        <DxFormLayout CaptionPosition="CaptionPosition.Vertical" ItemSizeMode="SizeMode">
            <DxFormLayoutItem Caption="Location:" ColSpanLg="4" ColSpanMd="12">
                <Template>
                    <DxTextBox @bind-Text="@Location"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Check in:" ColSpanLg="4" ColSpanMd="6">
                <Template>
                    <DxDateEdit @bind-Date="@CheckIn"></DxDateEdit>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Check out:" ColSpanLg="4" ColSpanMd="6">
                <Template>
                    <DxDateEdit @bind-Date="@CheckOut"></DxDateEdit>
                </Template>
            </DxFormLayoutItem>
        </DxFormLayout>
    </div>
</div>

<CodeSnippet_FormLayout_Default_Vertical />

@code {
    string Location { get; set; } = "London";
    DateTime CheckIn { get; set; } = DateTime.Now;
    DateTime CheckOut { get; set; } = DateTime.Now;
}
